<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>伪类 | Introduction</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../css/盒子模型.html" />
    
    
    <link rel="prev" href="../css/选择器.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="2.3"
        data-chapter-title="伪类"
        data-filepath="css/伪类.md"
        data-basepath=".."
        data-revision="Wed Apr 18 2018 23:41:29 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="html.html">
            
            <span><b>1.</b> HTML</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="html/html的基本结构和内容.html">
            
                
                    <a href="../html/html的基本结构和内容.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        HTML
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="html/a-标签.html">
            
                
                    <a href="../html/a-标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        a-标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="html/img.html">
            
                
                    <a href="../html/img.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        img-标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="html/biaoge.html">
            
                
                    <a href="../html/biaoge.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        table-表格
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="html/列表与表单.html">
            
                
                    <a href="../html/列表与表单.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.5.</b>
                        
                        列表与表单
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="html/音频和视频-标签.html">
            
                
                    <a href="../html/音频和视频-标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.6.</b>
                        
                        音频与视频
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="html/iframe内嵌框架.html">
            
                
                    <a href="../html/iframe内嵌框架.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.7.</b>
                        
                        iframe内嵌框架
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="CSS.html">
            
            <span><b>2.</b> CSS</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="css/CSS语法.html">
            
                
                    <a href="../css/CSS语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        CSS基本语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="css/选择器.html">
            
                
                    <a href="../css/选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        选择器
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="2.3" data-path="css/伪类.html">
            
                
                    <a href="../css/伪类.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        伪类
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="css/盒子模型.html">
            
                
                    <a href="../css/盒子模型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        盒子模型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="css/字体.html">
            
                
                    <a href="../css/字体.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        字体
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.6" data-path="css/行高.html">
            
                
                    <a href="../css/行高.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.6.</b>
                        
                        行高
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >Introduction</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <p><img src="../img/123.png" alt="&#x56FE;&#x7247;"></p>
<h1 id="welcome-to-use-my-xtnotebook">Welcome to use My XT-Notebook</h1>
<h2 id="1&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;">1.&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;</h2>
<h3 id="a&#x5BF9;a&#x6807;&#x7B7E;&#x8BBE;&#x7F6E;&#x4F2A;&#x7C7B;">a.&#x5BF9;a&#x6807;&#x7B7E;&#x8BBE;&#x7F6E;&#x4F2A;&#x7C7B;</h3>
<table>
<thead>
<tr>
<th style="text-align:center">&#x7C7B;</th>
<th style="text-align:center">&#x5C5E;&#x6027;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">a:hover</td>
<td style="text-align:center">&#x9F20;&#x6807;&#x79FB;&#x4E0A;a&#x6807;&#x7B7E;</td>
</tr>
<tr>
<td style="text-align:center">a:active</td>
<td style="text-align:center">a&#x88AB;&#x70B9;&#x51FB;&#x672A;&#x677E;&#x624B;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x5E38;&#x7528;&#x5728;&#x70B9;&#x51FB;&#x7684;&#x53CD;&#x9988;&#x4E0A;</td>
</tr>
<tr>
<td style="text-align:center">a:visited</td>
<td style="text-align:center">a&#x6807;&#x7B7E;&#x88AB;&#x70B9;&#x51FB;&#x6D4F;&#x89C8;&#x8FC7;&#x7684;&#x72B6;&#x6001;</td>
</tr>
<tr>
<td style="text-align:center">a:link</td>
<td style="text-align:center">a&#x6807;&#x7B7E;&#x88AB;&#x6DFB;&#x52A0;&#x94FE;&#x63A5;&#x65F6;&#x7684;&#x72B6;&#x6001;</td>
</tr>
<tr>
<td style="text-align:center">a &#x7684;&#x4EA4;&#x4E92;&#x89E6;&#x53D1;</td>
<td style="text-align:center">&#x8BBE;&#x7F6E;a&#x6807;&#x7B7E;</td>
</tr>
<tr>
<td style="text-align:center"></td>
<td style="text-align:center">&#x8BBE;&#x7F6E;link&#x72B6;&#x6001;</td>
</tr>
<tr>
<td style="text-align:center"></td>
<td style="text-align:center">&#x8BBE;&#x7F6E;visited&#x72B6;&#x6001;</td>
</tr>
<tr>
<td style="text-align:center"></td>
<td style="text-align:center">&#x8BBE;&#x7F6E;hover&#x72B6;&#x6001;</td>
</tr>
<tr>
<td style="text-align:center"></td>
<td style="text-align:center">&#x8BBE;&#x7F6E;active&#x72B6;&#x6001;</td>
</tr>
<tr>
<td style="text-align:center">input:focus</td>
<td style="text-align:center">&#x8F93;&#x5165;&#x6846;&#x9009;&#x4E2D;&#x663E;&#x793A;&#x5149;&#x6807;&#x7684;&#x65F6;&#x5019;</td>
</tr>
<tr>
<td style="text-align:center">input:focus+.title</td>
<td style="text-align:center">&#x8F93;&#x5165;&#x72B6;&#x6001;&#x65F6;&#xFF0C;&#x63A7;&#x5236;&#x522B;&#x7684;&#x5143;&#x7D20;&#x667A;&#x80FD;&#x653E;&#x5728;&#x540E;&#x9762;&#x4F7F;&#x7528;&#xFF08;&#x5144;&#x5F1F;&#x5173;&#x7CFB;&#xFF09;</td>
</tr>
<tr>
<td style="text-align:center"></td>
<td style="text-align:center">&#x5982;&#x679C;title&#x8981;&#x6392;&#x5E03;&#x5728;input&#x524D;&#xFF0C;&#x5C31;&#x9700;&#x8981;&#x7528;&#x4E00;&#x4E9B;&#x5E03;&#x5C40;&#x7684;&#x65B9;&#x6CD5;&#x8C03;&#x6574;</td>
</tr>
<tr>
<td style="text-align:center">.title::selection</td>
<td style="text-align:center">&#x88AB;&#x9009;&#x4E2D;&#x65F6;</td>
</tr>
</tbody>
</table>
<h3 id="b&#x7ED3;&#x6784;">b.&#x7ED3;&#x6784;</h3>
<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            a{
                /*&#x666E;&#x901A;&#x72B6;&#x6001;*/
                color:orange;
                font-size: 20px;
            }
            a:hover{
                /*&#x9F20;&#x6807;&#x79FB;&#x4E0A;a&#x6807;&#x7B7E;*/
                color: white;
                background:orange;
            }

            a:active{
                /* a&#x88AB;&#x70B9;&#x51FB;&#x672A;&#x677E;&#x624B;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x5E38;&#x7528;&#x5728;&#x70B9;&#x51FB;&#x7684;&#x53CD;&#x9988;&#x4E0A; */
                color:blue;    
            }

            a:visited{
                /* a&#x6807;&#x7B7E;&#x88AB;&#x70B9;&#x51FB;&#x6D4F;&#x89C8;&#x8FC7;&#x7684;&#x72B6;&#x6001; */
                color: green;
            }
            a:link{
                /* a&#x6807;&#x7B7E;&#x88AB;&#x6DFB;&#x52A0;&#x94FE;&#x63A5;&#x65F6;&#x7684;&#x72B6;&#x6001; */
                color: brown;
            }
            input:focus{
                /* &#x8F93;&#x5165;&#x6846;&#x9009;&#x4E2D;&#x663E;&#x793A;&#x5149;&#x6807;&#x7684;&#x65F6;&#x5019; */
                color:red;
            }

            input:focus+.title{
                /*  &#x8F93;&#x5165;&#x72B6;&#x6001;&#x65F6;&#xFF0C;&#x63A7;&#x5236;&#x522B;&#x7684;&#x5143;&#x7D20;&#x667A;&#x80FD;&#x653E;&#x5728;&#x540E;&#x9762;&#x4F7F;&#x7528;&#xFF08;&#x5144;&#x5F1F;&#x5173;&#x7CFB;&#xFF09; */
                /* &#x5982;&#x679C;title&#x8981;&#x6392;&#x5E03;&#x5728;input&#x524D;&#xFF0C;&#x5C31;&#x9700;&#x8981;&#x7528;&#x4E00;&#x4E9B;&#x5E03;&#x5C40;&#x7684;&#x65B9;&#x6CD5;&#x8C03;&#x6574; */
                color: red;
            }
            .title{
                float: left;
            }
            .title::selection{
                /* &#x88AB;&#x9009;&#x4E2D;&#x65F6; */
                background: goldenrod;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;!--
            class    &#x7C7B;        &#x6DFB;&#x52A0;&#x6FC0;&#x6D3B;&#x7C7B;
                    &#x4F2A;&#x7C7B;        &#x57FA;&#x672C;&#x7684;&#x4EA4;&#x4E92;&#x7684;&#x4E0D;&#x540C;&#x72B6;&#x6001;

        --&gt;
        &lt;a href=&quot;&quot;&gt;&#x6DFB;&#x52A0;&#x672A;&#x8BBF;&#x95EE;&#x8FC7;&#x7684;&#x5730;&#x5740;&lt;/a&gt;
        &lt;a href=&quot;http://taobao.com&quot; class=&quot;active&quot;&gt;&#x53BB;&#x6DD8;&#x5B9D;&lt;/a&gt;

        &lt;!--
            a &#x7684;&#x4EA4;&#x4E92;&#x89E6;&#x53D1;
                1&#xB7;&#x8BBE;&#x7F6E;a&#x6807;&#x7B7E;
                2.&#x8BBE;&#x7F6E;link&#x72B6;&#x6001;
                3.&#x8BBE;&#x7F6E;visited&#x72B6;&#x6001;
                4.&#x8BBE;&#x7F6E;hover&#x72B6;&#x6001;
                5.&#x8BBE;&#x7F6E;active&#x72B6;&#x6001;

            &#x987A;&#x5E8F;&#x7F29;&#x5199;&#xFF1A;LoVe and HAte

        --&gt;

        &lt;div&gt;
        &lt;input type=&quot;text&quot; /&gt;&lt;span class=&quot;title&quot;&gt;&#x59D3;&#x540D;&#xFF1A;&lt;/span&gt;&lt;/div&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre><h2 id="2&#x4F2A;&#x7C7B;">2.&#x4F2A;&#x7C7B;</h2>
<h3 id="a&#x4F2A;&#x7C7B;">a.&#x4F2A;&#x7C7B;</h3>
<table>
<thead>
<tr>
<th style="text-align:center">&#x7C7B;</th>
<th style="text-align:center">&#x5C5E;&#x6027;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">a:nth-child(n)</td>
<td style="text-align:center">&#x9009;&#x4E2D;&#x4EFB;&#x610F;&#x7684;&#x513F;&#x5B50;,&#x62EC;&#x53F7;&#x5185;&#x53EF;&#x4EE5;&#x5199;&#x7B80;&#x5355;&#x7684;&#x6570;&#x5B66;&#x8868;&#x8FBE;&#x5F0F; &#xFF0C;&#x4ECE;&#x800C;&#x591A;&#x9009;</td>
</tr>
<tr>
<td style="text-align:center">a:first-child</td>
<td style="text-align:center">&#x7B2C;&#x4E00;&#x4E2A;</td>
</tr>
<tr>
<td style="text-align:center">a:last-child</td>
<td style="text-align:center">&#x6700;&#x540E;&#x4E00;&#x4E2A;</td>
</tr>
<tr>
<td style="text-align:center">a:nth-child(2n-1)</td>
<td style="text-align:center">&#x5947;&#x6570;&#x5076;&#x6570;&#x9879;</td>
</tr>
<tr>
<td style="text-align:center">.item:not(:nth-of-type(2n+3))</td>
<td style="text-align:center">&#x9664;&#x4E86;&#xFF08;&#x67D0;&#x4E00;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#xFF09;&#xFF0C;&#x7528;&#x591A;&#x4E2A;not&#x4F1A;&#x76F8;&#x4E92;&#x8986;&#x76D6;&#x6389;</td>
</tr>
<tr>
<td style="text-align:center">input:checked</td>
<td style="text-align:center">&#x5355;&#x9009;/&#x591A;&#x9009; &#x88AB;&#x9009;&#x4E2D;&#x7684;&#x72B6;&#x6001;</td>
</tr>
<tr>
<td style="text-align:center">textarea:disabled</td>
<td style="text-align:center">&#x6587;&#x672C;&#x57DF;&#x4E0D;&#x53EF;&#x7528;&#x65F6;&#x6DFB;&#x52A0;&#x7684;&#x6837;&#x5F0F;</td>
</tr>
</tbody>
</table>
<h3 id="b&#x5B9E;&#x4F8B;">b.&#x5B9E;&#x4F8B;</h3>
<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&#x4F2A;&#x7C7B;&lt;/title&gt;
    &lt;/head&gt;
    &lt;style type=&quot;text/css&quot;&gt;

        #baba .son:first-child{
            /* &#x7B2C;&#x4E00;&#x4E2A;&#x513F;&#x5B50; */
            font-size: 20px;
        }
        .son:last-child{
            /* &#x6700;&#x540E;&#x4E00;&#x4E2A;&#x513F;&#x5B50; */
            font-size: 12px;
        }
        /* 
             nth-child(n)
                 &#x9009;&#x4E2D;&#x4EFB;&#x610F;&#x7684;&#x513F;&#x5B50;
                 &#x62EC;&#x53F7;&#x5185;&#x53EF;&#x4EE5;&#x5199;&#x7B80;&#x5355;&#x7684;&#x6570;&#x5B66;&#x8868;&#x8FBE;&#x5F0F; &#xFF0C;&#x4ECE;&#x800C;&#x591A;&#x9009;
        */
        .son:nth-child(2n-1){
            color: burlywood;
        }

        /*.item:nth-of-type(3){
            background: skyblue;
        }*/

        .item:not(:nth-of-type(2n+3)){
            /* &#x9664;&#x4E86;&#xFF08;&#x67D0;&#x4E00;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#xFF09; */
            /* &#x7528;&#x591A;&#x4E2A;not&#x4F1A;&#x76F8;&#x4E92;&#x8986;&#x76D6;&#x6389; */
            background: yellow;
        }

        input:checked{
            /* &#x5355;&#x9009;/&#x591A;&#x9009; &#x88AB;&#x9009;&#x4E2D;&#x7684;&#x72B6;&#x6001; */
        }
        textarea:disabled{
            /* &#x6587;&#x672C;&#x57DF;&#x4E0D;&#x53EF;&#x7528;&#x65F6;&#x6DFB;&#x52A0;&#x7684;&#x6837;&#x5F0F; */
        }

    &lt;/style&gt;
    &lt;body&gt;


        &lt;!--&lt;div&gt;
            &lt;p&gt;&#x513F;&#x5B50;1&lt;/p&gt;
            &lt;p&gt;&#x513F;&#x5B50;2&lt;/p&gt;
            &lt;p&gt;&#x513F;&#x5B50;3&lt;/p&gt;
        &lt;/div&gt;--&gt;

        &lt;!--div#father&gt;p.son{&#x513F;&#x5B50;$}*5--&gt;
        &lt;div id=&quot;baba&quot;&gt;
            &lt;p class=&quot;son&quot;&gt;&#x513F;&#x5B50;1&lt;/p&gt;
            &lt;p class=&quot;son&quot;&gt;&#x513F;&#x5B50;2&lt;/p&gt;
            &lt;p class=&quot;son&quot;&gt;&#x513F;&#x5B50;3&lt;/p&gt;
            &lt;p class=&quot;son&quot;&gt;&#x513F;&#x5B50;4&lt;/p&gt;
            &lt;p class=&quot;son&quot;&gt;&#x513F;&#x5B50;5&lt;/p&gt;
        &lt;/div&gt;

        &lt;ul&gt;
            &lt;li class=&quot;item&quot;&gt;&#x65B0;&#x95FB;1&lt;/li&gt;
            &lt;li class=&quot;item&quot;&gt;&#x65B0;&#x95FB;2&lt;/li&gt;
            &lt;li class=&quot;item&quot;&gt;&#x65B0;&#x95FB;3&lt;/li&gt;
            &lt;li class=&quot;item&quot;&gt;&#x65B0;&#x95FB;4&lt;/li&gt;
            &lt;li class=&quot;item&quot;&gt;&#x65B0;&#x95FB;5&lt;/li&gt;
        &lt;/ul&gt;

        &lt;!-- &#x5355;&#x9009; checked&#x9009;&#x4E2D;&#x72B6;&#x6001;--&gt;
        &lt;input type=&quot;radio&quot; checked /&gt;

        &lt;!-- &#x6587;&#x672C;&#x57DF; disabled&#x4E0D;&#x53EF;&#x7528;&#x72B6;&#x6001; --&gt;
        &lt;textarea disabled&gt;
            &#x9738;&#x738B;&#x6761;&#x6B3E;
        &lt;/textarea&gt;    
    &lt;/body&gt;
&lt;/html&gt;
</code></pre><h2 id="3&#x4F2A;&#x5BF9;&#x8C61;">3.&#x4F2A;&#x5BF9;&#x8C61;</h2>
<h3 id="a&#x5C5E;&#x6027;">a.&#x5C5E;&#x6027;</h3>
<p>|&#x7C7B;|&#x5C5E;&#x6027;|
|div::first-letter|&#x5BB9;&#x5668;&#x91CC;&#x7684;&#x6587;&#x672C;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;|
|div::first-line|&#x5BB9;&#x5668;&#x91CC;&#x7684;&#x6587;&#x672C;&#x7684;&#x7B2C;&#x4E00;&#x884C;|
|div::before|content:&quot;&#x524D;&#x9762;&quot;;|
|div::after|content: &quot;&#x540E;&#x9762;&quot;;|
|input::-webkit-input-placeholder|chrome Safari|
|input:-ms-input-placeholder|microsoft|
|input:-moz-placeholder|&#x706B;&#x72D0;4~18|
|input::-moz-placeholder|&#x706B;&#x72D0;19+|</p>
<h3 id="b&#x7ED3;&#x6784;">b.&#x7ED3;&#x6784;</h3>
<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            /* &#x5BB9;&#x5668;&#x91CC;&#x7684;&#x6587;&#x672C;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B57;&#x7B26; */
            div::first-letter{
                font-size: 30px;
                font-weight: bold;
            }
            div::first-line{
                color:red;
            }


            /*&#x5728;&#x5BB9;&#x5668;&#x524D;&#x9762;&#x63D2;&#x5165;&#x4E00;&#x4E2A;&#x4F2A;&#x5BF9;&#x8C61;&#xFF0C;&#x5FC5;&#x987B;&#x52A0;&#x4E0A;content&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x6CD5;&#x548C;&#x5176;&#x4ED6;&#x884C;&#x5185;&#x5143;&#x7D20;&#x4E00;&#x6837;*/
            div::before{
                content:&quot;&#x524D;&#x9762;&quot;;
            }

            div::after{
                content: &quot;&#x540E;&#x9762;&quot;;
            }

            input::-webkit-input-placeholder{
                /*chrome Safari*/
                color:red;
            }
            input:-ms-input-placeholder{
                /* microsoft */
                /* &#x53CC;&#x5192;&#x53F7;&#x5199;&#x6CD5;&#xFF0C;&#x8001;ie&#x5B58;&#x5728;&#x95EE;&#x9898; */
                color:red;
            }

            input:-moz-placeholder{
                /* &#x706B;&#x72D0;4~18*/
                color:red;
            }

            input::-moz-placeholder{
                /* &#x706B;&#x72D0;19+ */
                color:red;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;!--
            &#x95EE;&#x9898;&#xFF1A;
            before &#x548C; after &#x53D8;&#x6210;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x65F6;&#x5019;&#x90FD;&#x4F1A;&#x53D7;&#x5230;frist-line&#x5F71;&#x54CD;
        --&gt;
        &lt;div&gt;
            &lt;!-- before --&gt;
            &#x4F2A;&#x5BF9;&#x8C61;&#x9009;&#x62E9;&#x5668;&lt;br /&gt;&#x4ED6;&#x4E0D;&#x662F;&#x771F;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x662F;css&#x53EC;&#x5524;&#x51FA;&#x6765;&#x7684;
            &lt;!-- after --&gt;
        &lt;/div&gt;

        &lt;input type=&quot;text&quot; placeholder=&quot;&#x8BF7;&#x8F93;&#x5165;&#x4F60;&#x7684;&#x8D26;&#x53F7;&quot; /&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../css/选择器.html" class="navigation navigation-prev " aria-label="Previous page: 选择器"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../css/盒子模型.html" class="navigation navigation-next " aria-label="Next page: 盒子模型"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"expandable-chapters":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
